<template>
	<view>
		<view class="title">发现</view>
		<view class="banner">
			<banner :rotation="rotation" :height="300"></banner>
		</view>
		<view class="nav">
			<view class="col-3" v-for="(item, index) in classList" :key="index">
				<image :src="item.logo" mode="widthFix"></image>
				<view>{{item.title}}</view>
			</view>
			
		</view>
		<view class="content">
			
			<uni-segmented-controll ref="controll"  :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
			<view class="bcf">
				<view :style="'display:'+ (current === 0?'block':'none')">
					<WaterfallsFlow :wfList='list' @itemTap="itemTap" />
				</view>
				<view v-if="current === 1">				
					<view v-for="(item,index) in glist" :key="index" class="blist">
						<navigator url="../product/product">
							<image :src="item.image" mode="widthFix" class="bimg"></image>
							<view class="info-pname">{{item.pName}} </view>
						</navigator>
						
						<view class="info">
							<navigator url="../product/product" class="left">
								<image :src="item.avatar" mode="widthFix" class="info-avatar"></image>
								<text class="info-nickname">{{item.nickName}}</text>
							</navigator>
							<view class="right" @click="change(index)">
								<text :class="'iconfont '+(item.collect?'icon-1_music90':'icon-1_music89')" ></text>
								<text>{{item.znum}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>	
		<view class="bstatus_bar"></view>
		<footernav></footernav>
	</view>
</template>

<script>
	var t = getApp().globalData,
		e = t.requirejs('core'),
		i = t.requirejs('foxui'),
		a = t.requirejs('jquery');
	export default {
		data() {
			return {	
				//选项卡
				items: [
					{
						name:'种草',
						en:'WANT TO BUY',
					},
					{
						name:'推荐',
						en:'RECOMMENDED',
					}
				],
				styleType: 'text',
				activeColor: '#363636',
				//默认显示为种草
				current: 0,
				//页面轮播
				rotation:[
					{
					 'img':'/static/images/b.jpg'
					},
					{
					 'img':'/static/images/b.jpg'
					}
				],
				//种草列表
				list:[],
				requiredData:[
					
					
				],
				//推荐
				glist:[
					{
						image:'/static/images/b1.jpg',
						avatar:'/static/images/t.png',
						nickName:'斑马西西',
						pName:'小年快乐',
						znum:'3'
					},
					{
						image:'/static/images/b2.jpg',
						avatar:'/static/images/t.png',
						nickName:'斑马西西',
						pName:'来自斑马博主的好物分享',
						znum:'4'
					},
					{
						image:'/static/images/b1.jpg',
						avatar:'/static/images/t.png',
						nickName:'斑马西西',
						pName:'小年快乐',
						znum:'3'
					},
					{
						image:'/static/images/b2.jpg',
						avatar:'/static/images/t.png',
						nickName:'斑马西西',
						pName:'来自斑马博主的好物分享',
						znum:'4'
					}
				],
				classList:[],
				//下拉数据没有数据，暂停下拉操作
				stop:true,
				page:1,
				
			}
		},
		onLoad() {
			let self=this
			//分类
			e.get('sns.board.get_boardlist', {}, function(t) {
				self.classList=t.result.list
			})
			self.init()
		
		},
		onPageScroll(e){
			this.$refs.controll._PageScroll(e)
		},
		onReachBottom(){
			// 模拟触底刷新
			if(this.stop==false){
				return false
			}
			this.page+=1
			//判断选项卡是否是种草，推荐
			if(this.current==0)
				this.init()
			else
				this.recommend()	
		},
		
		methods: {
			recommend(){
				
			},
			init(){
				let self=this
				//种草列表
				e.get('sns.board.getlist', {'page':self.page}, function(t) {
					if(t.result.list.length<1){
						self.stop=false
						return
					}
					if(self.page==1)
						self.list=t.result.list
					else
						self.list.push(...t.result.list)	
				})
			},
			itemTap(e){
				
			},
			//选项卡 点击事件
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				this.list=[]
				this.page=1
				//判断选项卡是否是种草，推荐
				if(this.current==0){
					this.init()
				}else{
					this.recommend()
				}
			},
			//推荐 是否取消点赞
			change(index){
				this.glist[index].collect=!this.glist[index].collect
				if(this.glist[index].collect)
					this.glist[index].znum=Number(this.glist[index].znum)+1
				else
					this.glist[index].znum=Number(this.glist[index].znum)-1
			}
		}
		
	}
</script>

<style  lang="scss">
@import 'uni.scss';	
.title{
	color: #3c3c3c;
	font-size: 34rpx;
	text-align: center;
	line-height: 56px;
	border-bottom: 1px solid #dbdbdb;
	font-weight: bold;
	position: fixed;
	top: 0;
	width: 100%;
	background: #fff;
	z-index: 999;
}
.banner{
	padding: 10px;
	margin-top: 55px;
	background: #fff;
}
.nav{
	display: flex;
	padding: 10px 0;
	height: 115px;
	background: #fff;
}
.nav .col-3{
	width: 25%;
	text-align: center;
}
.nav .col-3 image{
	width: 74px;
}
.nav .col-3 view{
	color: #3c3c3c;
	padding: 10px 0;
}
.content{
	position: relative;
}
.blist{
	margin: 20rpx 0;
	color: #333;
}
.blist .bimg{
	width: 100%;
}
.info-pname{
	font-weight: bold;
	font-size: 26rpx;
	padding: 20rpx 0;
}
.info{
	display: flex;
	height: 45rpx;
	line-height: 45rpx;
	justify-content: space-between;
}
.item-info .left{
	display: flex;
	height: 45rpx;
	line-height: 45rpx;
	width: 80%;
}
.info-avatar{
	width: 40rpx;
	padding-right: 10rpx;
	border-radius: 50%;
}

.info-nickname{
	font-size: 12px;
	color: #333;
	width: 60%;
	overflow: hidden;
}
.right{
	font-weight: bold;
	line-height: 40rpx;
	font-size: 27rpx;
	color: #2d2d2d;
	width: 20%;
}
.iconfont{
	color: #2f2f2f;
	font-size: 40rpx;
	padding-right: 5rpx;
	position: relative;
	top: 6rpx;
}
.icon-1_music90{
	color: #ff3546;
}
.bcf{
	padding: 120rpx 20rpx 0 20rpx;
}
</style>
